<template>
    <div>
        <NavBar><template v-slot:default>订单详情</template></NavBar>
        <div class="order-info">
            <div><span>订单状态：{{statusString}}</span></div>
            <div><span>订单编号：{{detail.order_no}}</span></div>
            <div><span>下单时间：{{detail.created_at}}</span></div>
            <div v-if="detail.status==1" @click="showPayFn" style="margin-top: 30px;margin-right: 30px">
                <van-button type="primary" size="large"  color="rgb(27,175,173)">去支付</van-button>
            </div >
            <div v-if="detail.status==2" @click="sureorder" style="margin-top: 15px;margin-right: 30px">
                <van-button type="default" size="large" >确认订单</van-button>
            </div>
        </div>
        <div class="center-info">
            <div><span>商品金额：</span>￥{{total}}.00</div>
            <div><span>配送方式：</span>普通快递</div>
        </div>
        <div class="bottom-info">
            <van-card v-for="item in detail.orderDetails.data" :key="item.id"
                    :num="item.num"
                    :price="item.price"
                    :desc="item.goods.description"
                    :title="item.goods.title"
                    :thumb="item.goods.cover_url"
            >
                <template #tags>
                    <van-tag plain type="danger">新书</van-tag>
                    <van-tag plain type="danger">热销</van-tag>
                </template>
            </van-card>
        </div>

<!--        //立即支付-->
        <van-popup v-model:show="showPay" position="bottom" :style="{ height: '40%' }" >
            <van-grid :border="false" :column-num="2">
<!--                //两个二维码-->
                <van-grid-item>
                    支付宝二维码 <br>
                    <van-image :src="aliyun" height="100" width="100" />
                </van-grid-item>
                <van-grid-item>
                    微信二维码 <br>
                    <van-image :src="aliyun" height="100" width="100" />
                </van-grid-item>
            </van-grid>
        </van-popup>
    </div>
</template>

<script>
    import { Dialog } from 'vant';
    import {Toast} from 'vant'
    import {useRoute,useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {toRefs,reactive,onMounted,computed} from 'vue'
    import NavBar from '../../../components/common/navbar/NavBar'
    import {confirmOrder, getOrderDetail,payOrder,payOrderStatus} from "../../../network/order";
    export default {

        name: "orderDetail",
        components:{
            NavBar
        },
        setup(){
          const store = useStore();
          const router =useRouter();
          const route = useRoute();
          const state = reactive({
              orderNo:'',
              detail:{
                  orderDetails:{
                      data:[],
                      status:0,
            }
              },
              showPay:false,
              aliyun:'',
              wechat:''
          });
          const init=()=>{
              const {id} = route.query;
              state.orderNo=id;
              getOrderDetail(id).then(res=>{
                 state.detail=res
              })
          }
          const statusString=computed(()=>{
              let status =['','已下单','已支付','已等待发货','确认收货','已过期']
              return status[state.detail.status]//获取状态码，获取订单状态
            });
          const total=computed(()=>{
              let sum = 0 ;
               state.detail.orderDetails.data.forEach(item=>{
                   sum+=item.num*item.price;
               })
              return sum;
          });
          onMounted(()=>{
              Toast.loading(
                  {message:'加载中...',forbidClick:true}
              )
              init();
              Toast.clear();
          });
          const showPayFn = ()=>{
              state.showPay=true;
              payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
                  //获取二维码信息
                  state.aliyun=res.qr_code_url;
                  state.wechat=res.qr_code_url;
              })
              const timer =setInterval(()=>{
                  payOrderStatus(state.orderNo).then(res=>{
                      if(res=='2') {
                          clearInterval(timer);
                          state.showPay=false;
                          router.push({path: '/orderDetail', query:{id:state.orderNo}})
                      }
                  })
              },2000)
          };
          const sureorder=()=>{
              Dialog.confirm({
                  title:'是否确认订单'
              }).then(()=>{
                          Toast('确认成功');
                          router.push('/order')
              })
          };
          const close =()=>{
            Dialog.close();
          };
          return{
              close,
              sureorder,
              total,
              statusString,
              ...toRefs(state),
              showPayFn
            }
        },


    }
</script>

<style scoped lang="scss">
.order-info{
    width: 100%;
    margin-top: 60px;
    div{
        text-align: left;
        color: #888888;
        margin: 10px 20px;
    }
}
    .center-info{
        margin-top: 15px;
        width: 100%;
        div{
            text-align: left;
            margin: 10px 30px;
            span{
                color: #888888;
            }
        }
    }
    .bottom-info{
        width:100%;
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
        align-items: center;
        div{
            width:100%;
            height: 100px;
            margin: 5px;
            text-align: left;
        }

}
</style>